<template>
  <div class="home-container">
    <!-- 搜索栏 -->
    <div class="search-bar">
      <div class="location">
        <span>{{ currentCity }}</span>
        <i class="el-icon-arrow-down"></i>
      </div>
      <div class="search-input">
        <i class="el-icon-search"></i>
        <input type="text" placeholder="输入商家、商品或地址">
      </div>
      <div class="user-icon">
        <i class="el-icon-user"></i>
      </div>
    </div>

    <!-- 轮播图 -->
    <div class="swiper-container">
      <el-carousel height="180px">
        <el-carousel-item v-for="(item, index) in banners" :key="index">
          <img :src="item.imgUrl" alt="banner" class="banner-img">
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 分类导航 -->
    <div class="category-nav">
      <div class="category-item" v-for="(item, index) in categories" :key="index">
        <img :src="item.icon" alt="category" class="category-icon">
        <span>{{ item.name }}</span>
      </div>
    </div>

    <!-- 商家列表 -->
    <div class="merchant-list">
      <div class="list-header">
        <h3>附近商家</h3>
        <div class="filter">
          <span>筛选</span>
          <i class="el-icon-arrow-down"></i>
        </div>
      </div>
      <div class="merchant-item" v-for="(merchant, index) in merchants" :key="index" @click="goToMerchant(merchant.id)">
        <img :src="merchant.cover" alt="merchant" class="merchant-cover">
        <div class="merchant-info">
          <div class="merchant-name">{{ merchant.name }}</div>
          <div class="merchant-rating">
            <span class="rating-star" v-for="i in 5" :key="i">
              <i class="el-icon-star-on" :style="{color: i <= merchant.rating ? '#ffc300' : '#eee'}"></i>
            </span>
            <span class="rating-value">{{ merchant.rating }}</span>
            <span class="sales-volume">月售{{ merchant.sales }}单</span>
          </div>
          <div class="merchant-tags">
            <span class="tag" v-for="(tag, idx) in merchant.tags" :key="idx">{{ tag }}</span>
          </div>
          <div class="merchant-price">
            <span>{{ merchant.minPrice }}起送</span>
            <span class="delivery-fee">{{ merchant.deliveryFee }}配送费</span>
          </div>
          <div class="merchant-distance">
            <span>{{ merchant.distance }}</span>
            <span>{{ merchant.time }}分钟</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部导航 -->
    <TabBar />
  </div>
</template>

<script>
import TabBar from '@/components/TabBar.vue'

export default {
  components: {
    TabBar
  },
  data() {
    return {
      currentCity: '北京市',
      banners: [
        { imgUrl: 'https://picsum.photos/600/300?random=1' },
        { imgUrl: 'https://picsum.photos/600/300?random=2' },
        { imgUrl: 'https://picsum.photos/600/300?random=3' }
      ],
      categories: [
        { name: '美食', icon: 'https://picsum.photos/60/60?random=11' },
        { name: '超市', icon: 'https://picsum.photos/60/60?random=12' },
        { name: '生鲜', icon: 'https://picsum.photos/60/60?random=13' },
        { name: '水果', icon: 'https://picsum.photos/60/60?random=14' },
        { name: '甜点饮品', icon: 'https://picsum.photos/60/60?random=15' },
        { name: '医药健康', icon: 'https://picsum.photos/60/60?random=16' },
        { name: '鲜花蛋糕', icon: 'https://picsum.photos/60/60?random=17' },
        { name: '早餐', icon: 'https://picsum.photos/60/60?random=18' },
        { name: '下午茶', icon: 'https://picsum.photos/60/60?random=19' },
        { name: '更多分类', icon: 'https://picsum.photos/60/60?random=20' }
      ],
      merchants: []
    }
  },
  methods: {
    goToMerchant(id) {
      this.$router.push({ name: 'Merchant', params: { id } })
    }
  },
  async mounted() {
    try {
      const response = await this.$axios.get('/api/merchants')
      this.merchants = response.data
    } catch (error) {
      console.error('获取商家列表失败', error)
      this.merchants = [
        {
          id: 1,
          name: '麦当劳（中关村店）',
          cover: 'https://picsum.photos/200/200?random=31',
          rating: 4.8,
          sales: 1234,
          tags: ['快餐', '汉堡', '早餐'],
          minPrice: '20',
          deliveryFee: '5',
          distance: '1.2km',
          time: '25-35'
        },
        {
          id: 2,
          name: '星巴克咖啡（五道口店）',
          cover: 'https://picsum.photos/200/200?random=32',
          rating: 4.7,
          sales: 987,
          tags: ['咖啡', '甜点', '下午茶'],
          minPrice: '30',
          deliveryFee: '6',
          distance: '0.8km',
          time: '15-25'
        },
        {
          id: 3,
          name: '老北京炸酱面',
          cover: 'https://picsum.photos/200/200?random=33',
          rating: 4.6,
          sales: 765,
          tags: ['中餐', '面食', '家常菜'],
          minPrice: '15',
          deliveryFee: '4',
          distance: '1.5km',
          time: '30-40'
        },
        {
          id: 4,
          name: '满记甜品',
          cover: 'https://picsum.photos/200/200?random=34',
          rating: 4.9,
          sales: 643,
          tags: ['甜品', '糖水', '冰淇淋'],
          minPrice: '25',
          deliveryFee: '5',
          distance: '2.0km',
          time: '35-45'
        },
        {
          id: 5,
          name: '绝味鸭脖',
          cover: 'https://picsum.photos/200/200?random=35',
          rating: 4.5,
          sales: 521,
          tags: ['小吃', '卤味', '夜宵'],
          minPrice: '15',
          deliveryFee: '5',
          distance: '1.8km',
          time: '30-40'
        }
      ]
    }
  }
}
</script>

<style scoped>
.home-container {
  padding-bottom: 50px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.search-bar {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  background-color: #ff6600;
  color: white;
}

.location {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: 16px;
}

.location i {
  margin-left: 5px;
  font-size: 12px;
}

.search-input {
  flex: 4;
  height: 30px;
  background-color: white;
  border-radius: 15px;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.search-input i {
  color: #999;
  margin-right: 5px;
}

.search-input input {
  border: none;
  outline: none;
  width: 100%;
  font-size: 14px;
}

.user-icon {
  flex: 1;
  text-align: right;
  font-size: 20px;
}

.swiper-container {
  padding: 10px;
  background-color: white;
}

.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.category-nav {
  display: flex;
  flex-wrap: wrap;
  background-color: white;
  padding: 10px 0;
}

.category-item {
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
}

.category-icon {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  object-fit: cover;
  margin-bottom: 5px;
}

.merchant-list {
  margin-top: 10px;
  background-color: white;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.list-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: normal;
}

.filter {
  display: flex;
  align-items: center;
  color: #666;
}

.filter i {
  margin-left: 5px;
  font-size: 12px;
}

.merchant-item {
  display: flex;
  padding: 15px;
  border-bottom: 1px solid #eee;
  text-decoration: none;
  color: #333;
}

.merchant-cover {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  object-fit: cover;
  margin-right: 10px;
}

.merchant-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.merchant-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.merchant-rating {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
}

.rating-star {
  display: flex;
}

.rating-value {
  margin-left: 5px;
}

.sales-volume {
  margin-left: 10px;
}

.merchant-tags {
  display: flex;
  margin-bottom: 5px;
}

.tag {
  font-size: 10px;
  color: #ff6600;
  border: 1px solid #ff6600;
  border-radius: 2px;
  padding: 0 3px;
  margin-right: 5px;
}

.merchant-price {
  display: flex;
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
}

.delivery-fee {
  margin-left: 10px;
}

.merchant-distance {
  display: flex;
  font-size: 12px;
  color: #999;
}

.merchant-distance span:first-child {
  margin-right: 10px;
}
</style>
    